<template>
  <div class="home-view">
    <!-- 数据看板区域 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="dashboard-item">
          <div class="title">总销售额</div>
          <div class="value">¥ {{ dashboardData.totalSales }}</div>
          <div class="sub-value">
            <span>周同比 {{ dashboardData.salesWeekChange }}%</span>
            <span>日同比 {{ dashboardData.salesDayChange }}%</span>
          </div>
          <div class="chart">
            <!-- 这里可以放置图表组件 -->
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashboard-item">
          <div class="title">访问量</div>
          <div class="value">{{ dashboardData.visits }}</div>
          <div class="sub-value">
            <span>周同比 {{ dashboardData.visitsWeekChange }}%</span>
            <span>日同比 {{ dashboardData.visitsDayChange }}%</span>
          </div>
          <div class="chart">
            <!-- 这里可以放置图表组件 -->
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashboard-item">
          <div class="title">支付笔数</div>
          <div class="value">{{ dashboardData.paymentCount }}</div>
          <div class="sub-value">
            <span>周同比 {{ dashboardData.paymentWeekChange }}%</span>
            <span>日同比 {{ dashboardData.paymentDayChange }}%</span>
          </div>
          <div class="chart">
            <!-- 这里可以放置图表组件 -->
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashboard-item">
          <div class="title">运营活动效果</div>
          <div class="value">{{ dashboardData.activityEffect }}%</div>
          <div class="sub-value">
            <span>周同比 {{ dashboardData.activityWeekChange }}%</span>
            <span>日同比 {{ dashboardData.activityDayChange }}%</span>
          </div>
          <div class="chart">
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 30px;" :gutter="20">
      <el-col :span="18">
        <div class="dashboard-item" style="height: calc(100vh - 425px)">
          <el-tabs v-model="activeTab" @tab-change="handleTabChange">
            <el-tab-pane label="访问量" name="visits">
              <div id="visitsChart" style="width: 100%; height: 350px;"></div>
            </el-tab-pane>
            <el-tab-pane label="用户数" name="users">
              <div id="usersChart" style="width: 100%; height: 350px;"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashboard-item">
          <div class="title" style="display: flex; justify-content: space-between">
            <span>系统公告</span>
            <el-button icon="Refresh" @click="AnnouncementList">刷新公告</el-button>
          </div>
          <el-timeline style="margin-top: 10px;">
            <el-timeline-item
                v-for="(notice, index) in data.recentNotices"
                :key="index"
                :timestamp="notice.date"
                placement="top">
              <el-card>
                <h4 style="margin-bottom: 5px">{{ notice.title }}</h4>
                <p>{{ notice.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {getAnnouncementListService} from '../api/announcement.js'
import * as echarts from 'echarts'
import {ref, onMounted, reactive, onBeforeUnmount} from 'vue'
// 当前激活的 tab
const activeTab = ref('visits')
// 数据看板
const dashboardData = reactive({
  totalSales: 126560,
  salesWeekChange: 12,
  salesDayChange: 11,
  visits: 8846,
  visitsWeekChange: 12,
  visitsDayChange: 11,
  paymentCount: 6560,
  paymentWeekChange: 12,
  paymentDayChange: 11,
  activityEffect: 78,
  activityWeekChange: 12,
  activityDayChange: 11,
});

// 图表实例
let visitsChart = null
let usersChart = null
// 模拟数据（你可以替换成真实接口请求的数据）
const chartData = {
  visits: [750, 720, 300, 780, 350, 700, 720, 760, 780, 760, 620, 790],
  users: [100, 180, 250, 230, 300, 350, 370, 360, 330, 310, 280, 250]
}

const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

const initVisitsChart = () => {
  if (visitsChart) visitsChart.dispose()
  visitsChart = echarts.init(document.getElementById('visitsChart'))
  const option = {
    tooltip: {trigger: 'axis'},
    grid: {left: '3%'},
    xAxis: {
      type: 'category',
      data: months // 使用月份作为 x 轴数据
    },
    yAxis: {type: 'value'},
    series: [{
      name: '访问量',
      type: 'bar',
      data: chartData.visits,
      itemStyle: {color: '#409EFF'}
    }]
  }
  visitsChart.setOption(option)
}

const initUsersChart = () => {
  if (usersChart) usersChart.dispose()
  usersChart = echarts.init(document.getElementById('usersChart'))
  const option = {
    tooltip: {trigger: 'axis'},
    grid: {left: '3%'},
    xAxis: {
      type: 'category',
      data: months
    },
    yAxis: {type: 'value'},
    series: [{
      name: '用户数',
      type: 'bar',
      data: chartData.users,
      itemStyle: {color: '#67C23A'}
    }]
  }
  usersChart.setOption(option)
}

const handleTabChange = (name) => {
  if (name === 'visits') {
    setTimeout(() => visitsChart.resize(), 100)
  } else if (name === 'users') {
    setTimeout(() => usersChart.resize(), 100)
  }
}
const AnnouncementList = async () => {
  const res = await getAnnouncementListService()
  if (res.data.code === '200') {
    data.recentNotices = res.data.data
  }
}


onMounted(async () => {
  initVisitsChart()
  initUsersChart()
  await AnnouncementList()
})

const data = reactive({
  recentNotices: []
})


onBeforeUnmount(() => {
  if (visitsChart) visitsChart.dispose()
  if (usersChart) usersChart.dispose()
})

</script>
<style lang="scss" scoped>


.chart {
  width: 100%;
  height: 100%;
}

.home-view {
  padding: 20px;

  .dashboard-item {

    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .title {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .value {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .sub-value {
      font-size: 14px;
      color: #999;

      span {
        margin-right: 10px;
      }
    }

    .chart {
      height: 30px;
    }
  }
}

</style>

